<template>
  <SlideViewSingle v-if="id && visible"
                   :body-style="{padding: 0, height: '100%'}"
                   class="d-view"
                   @afterEnter="viewAfterEnter"
                   @close="hideView">
    <div v-loading="crmOption.loading" ref="crmDetailMain" class="detail-main">
      <flexbox v-if="canShowDetail && detailData" direction="column"
               align="stretch" class="d-container">
        <SzDetailHeadSingle
            :detail="detailData"
            :head-details="headDetails"
            :id="id"
            :crm-type="crmOption.crmType"
            :page-list="pageList"
            @pageChange="pageChange"
            @handle="detailHeadHandle"
            @close="hideView">
          <template v-slot:nameheadDetails>
            <span v-if="detailData.checkStatus == 8" class="is-invalid">（已作废）</span>
          </template>
        </SzDetailHeadSingle>

        <examine-info
            v-if="detailData.examineRecordId"
            :id="id"
            :record-id="detailData.examineRecordId"
            :owner-user-id="detailData.ownerUserId"
            class="examine-info"
            examine-type="crm_contract"
            @on-handle="examineHandle"/>
        <flexbox class="d-container-bd" align="stretch">
          <el-tabs v-model="currentTabName" type="border-card" class="d-container-bd--left">
            <el-tab-pane v-for="(item, index) in tabNames" :key="index"
                         :label="item.label" :name="item.name" lazy>
              <component :is="item.comp"
                         :detail="detailData"
                         :type-list="logTypes"
                         :handle="activityHandle"
                         :id="id"
                         :crm-type="crmOption.crmType"
                         @handle="detailHeadHandle"/>
            </el-tab-pane>
          </el-tabs>
          <transition name="slide-fade">
            <el-tabs v-show="showImportInfo"
                     value="chiefly-contacts"
                     type="border-card"
                     class="d-container-bd--right">
              <el-tab-pane label="重要信息"
                           name="chiefly-contacts"
                           lazy>
                <ChieflyContacts :id="id" :customer-id="customerId"/>
              </el-tab-pane>
            </el-tabs>
          </transition>
        </flexbox>
      </flexbox>
    </div>
    <el-button class="firse-button"
               @click="showImportInfo= !showImportInfo">
      重<br>要<br>信<br>息<br>
      <i :class="{ 'is-reverse': !showImportInfo }" class="el-icon-arrow-right el-icon--right"/>
    </el-button>

    <!--    此处是编辑-->
    <ContactsCreate v-if="showEditDialog"
                    :action="{type: 'update', id: id, batchId: detailData.batchId, editDetail: detailData}"
                    :crm-type="crmOption.crmType"
                    @save-success="editSaveSuccess"
                    @close="showEditDialog=false"/>
  </SlideViewSingle>
</template>

<script setup>
import CRMEditBaseInfo from '/src/views/crm/componentsNew/BaseInfo/CRMEditBaseInfo.vue' // 产品基本信息
import RelativeFiles from '/src/views/crm/componentsNew/relative/RelativeFiles.vue' // 相关附件
import RelativeHandle from '/src/views/crm/componentsNew/relative/RelativeHandle.vue' // 相关操作
import {crmOptionKey} from "@/views/crm/componentsNew/SzCrud/keys.js";
import SlideViewSingle from "@/views/crm/componentsNew/SzCrud/SlideView.vue";
import SzDetailHeadSingle from "@/views/crm/componentsNew/SzCrud/detail/SzDetailHead.vue";
import {filedGetInformationAPI} from "@/api/crm/common.js";
import crmTypeModel from "@/views/crm/model/crmTypeModel.js";
import {useSzTab} from "@/views/crm/componentsNew/SzCrud/detail/useSzTab.js";
import {useSzDetail} from "@/views/crm/componentsNew/SzCrud/detail/useSzDetail.js";
import {ElMessage} from "element-plus"
import {getCurrentInstance} from 'vue'
import ChieflyContacts from "@/views/crm/contacts/components/ChieflyContacts.vue";
import RelativeTeam from "@/views/crm/componentsNew/relative/RelativeTeam.vue";
import RelativeBusiness from "@/views/crm/componentsNew/relative/RelativeBusiness.vue";
import ActivitySingle from "/src/views/crm/componentsNew/ActivityNew/index.vue"
import {useErpUserStore} from "@/store/modules/usererp.js";
import {crmContactsReadAPI} from "@/api/crm/contacts.js";
import ContactsCreate from "./Create.vue"
import {crmBusinessAdvanceAPI, crmBusinessReadAPI, crmBusinessStatusByIdAPI} from "@/api/crm/business.js";
import RelativeContacts from "@/views/crm/componentsNew/relative/RelativeContacts.vue";
import RelativeContract from "@/views/crm/componentsNew/relative/RelativeContract.vue";
import RelativeProduct from "@/views/crm/componentsNew/relative/RelativeProduct.vue";
import RelativePrint from "@/views/crm/componentsNew/relative/RelativePrint.vue";
import RelativeInvoice from "@/views/crm/componentsNew/relative/RelativeInvoice.vue";
import RelativeVisit from "@/views/crm/componentsNew/relative/RelativeVisit.vue";
import RelativeReturnMoney from "@/views/crm/componentsNew/relative/RelativeReturnMoney.vue";
import {crmContractReadAPI} from "@/api/crm/contract.js";
import {getWkDateTime} from "utils";
import {useNumberHook} from "@/hooks/useNumberHook.js";

defineOptions({
  // 客户管理 的 产品详情
  name: 'ContractDetail',
})
const props = defineProps({
  visible: Boolean,
  // 详情信息id
  id: [String, Number],
  // 表示第几个详情
  pageIndex: [String, Number],
  // 用于详情切换
  pageList: Array,
  crmOptionChange: Function
})

const {separator} = useNumberHook();

const showImportInfo = ref(true)
// 从store中拿到crm权限
const crm = computed(() => {
  const erpUserStore = useErpUserStore();
  return erpUserStore.crm
})


// 商机状态数据
const status = ref([])
// 完结状态
const statuHandleItems = ref([
  {
    name: '赢单',
    type: 1,
    value: '100%',
    img: import('/src/assets/img/check_suc.png')
  },
  {
    name: '输单',
    type: 2,
    value: '0%',
    img: import('/src/assets/img/check_fail.png')
  },
  {
    name: '无效',
    type: 3,
    value: '0%',
    img: import('/src/assets/img/check_cancel.png')
  }
])

// 下面的headDetails、tabNames、activityHandle、getDetail需要自定义，不能放在SzDetail中
const headDetails = reactive([
  { title: '合同编号', value: '' },
  { title: '客户名称', value: '' },
  { title: '合同金额（元）', value: '' },
  { title: '下单时间', value: '' },
  { title: '回款金额（元）', value: '' },
  { title: '负责人', value: '' }
])

const tabNames = computed(() => {
  var tempsTabs = []
  if (crm.value.contract && crm.value.contract.read) {
    tempsTabs.push({ label: '详细资料', name: 'CRMEditBaseInfo', comp: CRMEditBaseInfo })
  }

  tempsTabs.push({ label: '活动', name: 'Activity', comp: ActivitySingle })

  if (crm.value.product && crm.value.product.index) {
    tempsTabs.push({ label: getTabName('产品', tabsNumber.value.productCount), name: 'RelativeProduct', comp: RelativeProduct })
  }
  if ((crm.value.receivables && crm.value.receivables.index) || (crm.value.receivablesPlan && crm.value.receivablesPlan.index)) {
    tempsTabs.push({ label: getTabName('回款', tabsNumber.value.receivablesCount), name: 'RelativeReturnMoney' , comp: RelativeReturnMoney})
  }
  if (crm.value.visit && crm.value.visit.index) {
    tempsTabs.push({ label: getTabName('回访', tabsNumber.value.returnVisitCount), name: 'RelativeVisit', comp: RelativeVisit })
  }

  if (crm.value.invoice && crm.value.invoice.index) {
    tempsTabs.push({ label: getTabName('发票', tabsNumber.value.invoiceCount), name: 'RelativeInvoice', comp: RelativeInvoice })
  }
  tempsTabs.push({ label: getTabName('团队成员', tabsNumber.value.memberCount), name: 'RelativeTeam', comp: RelativeTeam })
  tempsTabs.push({ label: getTabName('附件', tabsNumber.value.fileCount), name: 'RelativeFiles', comp: RelativeFiles })
  tempsTabs.push({ label: '操作记录', name: 'RelativeHandle', comp: RelativeHandle })
  if (crm.value.contract && crm.value.contract.print) {
    tempsTabs.push({ label: '打印记录', name: 'RelativePrint' , comp: RelativePrint})
  }


  return tempsTabs

})

/**
 * 根据记录筛选。只有存在Activity的时候，才需要logTypes
 */
const logTypes = computed(() => {
  return [{
    icon: 'all',
    color: '#2362FB',
    command: '',
    label: '全部活动'
  }, {
    icon: 'contract',
    color: '#FD5B4A',
    command: 6,
    label: '合同'
  }, {
    icon: 'o-task',
    color: '#D376FF',
    command: 11,
    label: '任务'
  }, {
    icon: 'receivables',
    color: '#FFB940',
    command: 7,
    label: '回款'
  }, {
    icon: 'log',
    color: '#5864FF',
    command: 8,
    label: '日志'
  }, {
    icon: 'approve',
    color: '#9376FF',
    command: 9,
    label: '审批'
  }]
})

// 是否能新建跟进记录
const canCreateFollowRecord = computed(() => {
  return crm.value && crm.value.followRecord && crm.value.followRecord.save
})

/**
 * 活动操作
 */
const activityHandle = computed(() => {
  let temps = [
    {
      type: 'task',
      label: '创建任务'
    }, {
      type: 'receivables',
      label: '创建回款'
    }
  ]

  if (canCreateFollowRecord) {
    temps = [{
      type: 'log',
      label: '写跟进'
    }].concat(temps)
  }

  return temps
})

const emits = defineEmits(['update:pageIndex', 'update:visible',
  'crm-detail-update', 'update:id', 'handle', 'crm-tab-num-update', 'hide-view'])

const crmOption = inject(crmOptionKey)
const {currentTabName, tabsNumber, getTabsNum, getTabName}
    = useSzTab(crmOption, toRef(() => props.id))
const {detailData, canShowDetail} = useSzDetail(crmOption)

const detailOption = reactive({
  currentTabName,
  tabsNumber, getTabsNum, getTabName, detailData, canShowDetail
})

/**
 * 客户ID
 */
const customerId = computed(() => {
  return detailData ? detailData.customerId || '' : ''
})

onMounted(() => {
  if (crm.value.contract && crm.value.contract.read) {
    currentTabName.value = 'CRMEditBaseInfo'
  }
})


// 在detail.vue中
watch(() => props.id, () => {
  if (canShowDetail && canShowDetail.value) {
    detailData.value = null
    tabsNumber.value = {}
    getDetail()
    getTabsNum()
  }
})

const mainFileList = computed(() => {
  if (detailData && detailData.mainFileList) {
    return detailData.mainFileList
  }

  return []
})

const detailFileList = computed(() => {
  if (detailData && detailData.detailFileList) {
    return detailData.detailFileList
  }

  return []
})

/**
 * 详情
 */
function getDetail() {
  crmOption.loading = true
  crmContractReadAPI({contractId: props.id}).then(res => {
    detailData.value = res.data.data
    const resData = res.data.data || {}
    headDetails[0].value = resData.num
    headDetails[1].value = resData.customerName
    headDetails[2].value = separator(resData.money || 0)
    headDetails[3].value = getWkDateTime(resData.orderDate)
    headDetails[4].value = separator(resData.receivablesMoney || 0)
    headDetails[5].value = resData.ownerUserName


    crmOption.loading = false
  }).catch((r) => {
    console.log("r", r)
    crmOption.loading = false
    hideView()
  })

}

/**
 * 状态信息
 */
function getBusinessStatusById() {
  crmOption.loading = true
  crmBusinessStatusByIdAPI({
    businessId: props.id
  }).then(res => {
    crmOption.loading = false
    const data = res.data.data
    handleBusinessStatus(data.isEnd, data.statusId, data.statusList, data.statusRemark)
  }).catch(() => {
    crmOption.loading = false
  })
}

/**
 * 处理商机状态数据
 */
function handleBusinessStatus(isEnd, statusId, statusList, statusRemark) {
  status.value = []
  if (statusList && statusList.length > 0) {
    const isdoing = isEnd == 0
    let isdoingIndex = -1
    for (let index = 0; index < statusList.length; index++) {
      const item = statusList[index]
      if (isdoing) {
        if (item.statusId == statusId) {
          isdoingIndex = index
          item['class'] = 'state-suc'
        } else {
          item['class'] = isdoingIndex >= 0 ? 'state-undo' : 'state-suc'
        }
      } else {
        if (item.statusId == statusId) {
          isdoingIndex = index
          item['class'] = 'state-suc'
        } else {
          item['class'] = isdoingIndex >= 0 ? 'state-invalid' : 'state-suc'
        }
      }
      status.value.push(item)
    }

    const overItem = {type: isEnd}
    if (isEnd == 0) {
      overItem.name = '结束'
      overItem['overIcon'] = ['el-icon-arrow-down', 'el-icon--right']
      if (isdoingIndex == statusList.length - 1) {
        overItem['class'] = 'state-doing'
      } else {
        if (status.value.length > 0 && statusId != 0) {
          // 有推进状态 才会有下一阶段
          status.value[isdoingIndex + 1].class = 'state-doing'
        }
        overItem['class'] = 'state-undo'
      }
    } else if (isEnd == 1) {
      overItem.name = '赢单'
      overItem.title = '赢单' // 详情标题 和 内容
      overItem.detail = '赢单率100%'
      overItem['overIcon'] = ['el-icon-check', 'el-icon--right']
      overItem['class'] = 'state-suc'
    } else if (isEnd == 2) {
      overItem.name = '输单'
      overItem.title = '赢单率0%'
      overItem.detail = statusRemark
      overItem['overIcon'] = ['el-icon-circle-close', 'el-icon--right']
      overItem['class'] = 'state-fail'
    } else if (isEnd == 3) {
      overItem.name = '无效'
      overItem.title = '赢单率0%'
      overItem.detail = statusRemark
      overItem['overIcon'] = ['el-icon-remove-outline', 'el-icon--right']
      overItem['class'] = 'state-invalid'
    }
    status.value.push(overItem)
  }
}

/**
 * 操作状态改变
 */
function handleStatuChange(item, index) {
  if (detailData.isEnd != 0) {
    // 非完结状态下 可推进
    return
  }
  if (!item.isdoing) {
    var message = '确定进入' + item.name + '阶段'

    ElMessageBox.confirm('message?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      crmOption.loading = true
      crmBusinessAdvanceAPI({
        businessId: props.id,
        statusId: item.statusId
      })
          .then(res => {
            crmOption.loading = false
            ElMessage.success({message: '操作成功'})
            getDetail()
          })
          .catch(() => {
            crmOption.loading = false
          })
    })
        .catch(() => {
        })
  }
}

/**
 * 完结状态结果
 */
function handleStatuResult(item, index) {
  if (detailData.isEnd != 0) {
    // 非完结状态下 可推进
    return
  }
  /** 输单 和 无效 */
  if (item.type == 2 || item.type == 3) {
    var message = '请填写' + item.name + '原因：'
    var title = item.name + '原因'
    ElMessageBox.prompt(message, title, {
      inputType: 'text',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      closeOnClickModal: false
    }).then(({value}) => {
      crmOption.loading = true
      crmBusinessAdvanceAPI({
        businessId: props.id,
        statusId: item.statusId,
        isEnd: item.type,
        statusRemark: value
      }).then(res => {
        crmOption.loading = false
        ElMessage.success({message: '操作成功'})
        getDetail()
      }).catch(() => {
        crmOption.loading = false
      })
    }).catch(() => {
    })
  } else {
    ElMessageBox.confirm('确定将当前商机设为' + item.name + '吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      crmOption.loading = true
      crmBusinessAdvanceAPI({
        businessId: props.id,
        statusId: item.statusId,
        isEnd: item.type
      }).then(res => {
        crmOption.loading = false
        ElMessage.success({message: '操作成功'})
        getDetail()
      }).catch(() => {
        crmOption.loading = false
      })
    }).catch(() => {
    })
  }
}

/**
 * 进入详情页面后的动作
 */
function viewAfterEnter() {
  if (canShowDetail.value) {
    getDetail()
    getTabsNum()
    bus.on('crm-tab-num-update', getTabsNum)
  }
}

/**
 * 关闭
 */
function hideView() {
  emits('hide-view')
}

/**
 * 详情页面切换
 */
function pageChange(type) {
  let currentPageIndex = props.pageIndex
  if (type === 'left') {
    if (props.pageIndex > 0) {
      emits('update:pageIndex', --currentPageIndex)
      emits('update:id', props.pageList[currentPageIndex][`${crmOption.crmType}Id`])
    } else {
      ElMessage.error({message: '没有更多了！'})
    }
  } else {
    if (currentPageIndex < props.pageList.length - 1) {
      emits('update:pageIndex', ++currentPageIndex)
      emits('update:id', props.pageList[currentPageIndex][`${crmOption.crmType}Id`])
    } else {
      ElMessage.error({message: '没有更多了！'})
    }
  }
}




// 编辑操作
const showEditDialog = ref(false)

/**
 * 顶部头 操作
 * @param {*} data
 */
function detailHeadHandle(data) {
  // 返回值为false 不继续执行
  if (detailHeadHandleClick(data) === false) {
    return
  }

  if (data.type === 'edit') {
    showEditDialog.value = true
    // props.crmOptionChange('isCreate', true)
    // props.crmOptionChange('createShow', true)
  } else if (data.type === 'delete' ||
      data.type === 'exit-team' ||
      data.type === 'alloc' ||
      data.type === 'get' ||
      data.type === 'transfer' ||
      data.type === 'transform' ||
      data.type === 'delete' ||
      data.type === 'put_seas') {
    hideView()
  } else if (data.type === 'state_start' ||
      data.type === 'state_disable' ||
      data.type === 'deal_status' ||
      data.type === 'cancel' ||
      data.type === 'examine') {
    getDetail()
  } else if (data.type === 'save-success') {
    // 但字段编辑成功刷新
    editSaveSuccess()
    return
  }

  emits('handle', data)
}

function editSaveSuccess() {
  emits('crm-detail-update', crmOption.crmType)
  emits('handle', {type: 'save-success'})
  detailOption.detailData = null
  getDetail()
}


/**
 * 审核操作
 */
function examineHandle(data) {
  detailHeadHandle({ type: 'examine' })
}

/**
 * 详情操作
 */
function detailHeadHandleClick(data) {
  if (data.type === 'edit') {
    if (detailData.checkStatus === 1) {
      ElMessage.error({message: '已通过的合同作废后才可编辑'})
      return false
    } else if (detailData.checkStatus === 3) {
      ElMessage.error({message: '审核中的合同撤回后才可编辑'})
      return false
    } else {
      crmOption.createAction = { type: 'update', id: props.id, batchId: detailData.batchId }
    }
  }
}

/**
 * 详情操作
 */
function deadHandleClick(data) {
  if (data.type === 'copyContract') {
    crmOption.createAction = { type: 'update', title: '复制合同', id: props.id, isCopy: true }
    crmOption.isCreate = true
  }
}

</script>

<style lang="scss" scoped>
.image {
  color: #333;

  &-info {
    margin: 10px 25px 0;

    &__label {
      font-size: 13px;
    }

    &__list {
      overflow-x: auto;
      white-space: nowrap;

      img {
        margin-top: 15px;
        border-radius: $xr-border-radius-base;
        cursor: pointer;
      }

      img + img {
        margin-left: 20px;
      }

      .main-img {
        width: 100px;
        height: 76px;
        object-fit: contain;
        vertical-align: top;
      }

      .detial-img {
        width: 100px;
        height: 80px;
        object-fit: contain;
        vertical-align: top;
      }
    }
  }

  .no-img {
    color: #666;
    margin: 50px 0;
    text-align: center;
  }
}

@import '../styles/crmdetail';
.busi-state-main {
  margin-top: 15px;
  padding: 15px;
  border-top: 1px solid $xr-border-line-color;
  border-bottom: 1px solid $xr-border-line-color;
  background-color: white;
}

.busi-state {
  position: relative;
  padding-left: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 1;

  a {
    flex-shrink: 0;
  }
}

.busi-state-item {
  padding: 10px 30px;
  margin: 5px 0;
  height: 38px;
  position: relative;
  margin-right: 5px;
  border-top: 2px solid #ebebeb;
  border-bottom: 2px solid #ebebeb;

  .state-circle {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    background-color: white;
    transform: rotate(45deg);
    position: absolute;
    z-index: -1;
  }

  .state-arrow {
    width: 38px;
    height: 38px;
    transform: scale(0.707) rotate(45deg);
    border-top: 2px solid #ebebeb;
    border-right: 2px solid #ebebeb;
    background-color: white;
    position: absolute;
  }
}

.state-undo {
  border-top: 2px solid #ebebeb;
  border-bottom: 2px solid #ebebeb;
  background-color: white;
  color: #666;

  .state-circle {
    border-color: #ebebeb;
    background-color: white;
  }

  .state-arrow {
    border-color: #ebebeb;
    background-color: white;
  }
}

.state-doing {
  border-top: 2px solid #00CA9D;
  border-bottom: 2px solid #00CA9D;
  background-color: white;
  color: #00CA9D;

  .circle-left {
    border-color: #00CA9D;
    background-color: white;
  }

  .circle-right {
    border-color: #00CA9D;
    background-color: white;
  }

  .arrow-left {
    border-color: #00CA9D;
    background-color: white;
  }

  .arrow-right {
    border-color: #00CA9D;
    background-color: white;
  }
}

.state-suc {
  border-top: 2px solid #00CA9D;
  border-bottom: 2px solid #00CA9D;
  background-color: #00CA9D;
  color: white;

  .circle-left {
    border-color: #00CA9D;
    background-color: #00CA9D;
  }

  .circle-right {
    border-color: #00CA9D;
    background-color: #00CA9D;
  }

  .arrow-left {
    border-color: #00CA9D;
    background-color: white;
  }

  .arrow-right {
    border-color: #00CA9D;
    background-color: #00CA9D;
  }
}

.state-fail {
  border-top: 2px solid #ff6767;
  border-bottom: 2px solid #ff6767;
  background-color: #ff6767;
  color: white;

  .circle-left {
    border-color: #ff6767;
    background-color: #ff6767;
  }

  .circle-right {
    border-color: #ff6767;
    background-color: #ff6767;
  }

  .arrow-left {
    border-color: #ff6767;
    background-color: white;
  }

  .arrow-right {
    border-color: #ff6767;
    background-color: #ff6767;
  }
}

.state-invalid {
  border-top: 2px solid #ebebeb;
  border-bottom: 2px solid #ebebeb;
  background-color: #ebebeb;
  color: #666;

  .state-circle {
    border-color: #ebebeb;
    background-color: #ebebeb;
  }

  .state-arrow {
    border-color: #ebebeb;
    background-color: #ebebeb;
  }

  .circle-left {
    border-color: #ebebeb;
    background-color: #ebebeb;
  }

  .circle-right {
    border-color: #ebebeb;
    background-color: #ebebeb;
  }

  .arrow-left {
    border-color: #ebebeb;
    background-color: white;
  }

  .arrow-right {
    border-color: #ebebeb;
    background-color: #ebebeb;
  }
}

.arrow-right {
  z-index: 1;
  top: -2px;
  right: -19px;
}

.arrow-left {
  top: -2px;
  left: -18px;
}

.circle-right {
  border-top: 2px solid #ebebeb;
  border-right: 2px solid #ebebeb;
  z-index: 1;
  top: -2px;
  right: -15.5px;
}

.circle-left {
  border-left: 2px solid #ebebeb;
  border-bottom: 2px solid #ebebeb;
  top: -2px;
  left: -17px;
}

/** 状态操作布局 */
.state-handel-cont {
  font-size: 13px;
  color: #333;

  .state-handel-item {
    padding: 10px 0;
    cursor: pointer;

    .state-handel-item-img {
      width: 16px;
      height: 16px;
      border-radius: 8px;
      margin-right: 8px;
      flex-shrink: 0;
      display: block;
    }

    .state-handel-item-name {
      flex: 1;
    }

    .state-handel-item-value {
      flex-shrink: 0;
    }
  }

  .state-handel-item:hover {
    background-color: #f7f8fa;
  }
}


</style>
